<template>
  <div>
    <el-container style="height: 100vh; border: 1px solid #eee">
      <!-- 顶部导航栏 -->
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">
        <div class="header-left">
          <span>书缘校园-校园二手书交流系统</span>
        </div>
        <div class="header-right">
          <router-link to="/mySetting">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          </router-link>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <aside-layout></aside-layout>

        <!-- 主内容区 -->
        <el-main>
          <!-- 消息统计 -->
          <el-card class="message-card">
            <div slot="header" class="clearfix">
              <span>消息统计</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="stat-item">
                  <span>未读消息</span>
                  <span class="stat-value">{{ unreadCount }}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item">
                  <span>已读消息</span>
                  <span class="stat-value">{{ readCount }}</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item">
                  <span>总消息数</span>
                  <span class="stat-value">{{ totalMessages }}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <!-- 消息列表 -->
          <el-card class="message-card">
            <div slot="header" class="clearfix">
              <span>消息中心</span>
            </div>
            <!-- 搜索框和筛选 -->
            <el-row :gutter="20" style="margin-bottom: 20px;">
              <el-col :span="6">
                <el-input v-model="searchQuery" placeholder="请输入消息内容" clearable @clear="fetchMessages">
                  <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-select v-model="selectedType" placeholder="选择消息类型" @change="fetchMessages" style="width: 100%;">
                  <el-option label="所有类型" value=""></el-option>
                  <el-option label="系统通知" value="系统通知"></el-option>
                  <el-option label="订单通知" value="订单通知"></el-option>
                  <el-option label="活动通知" value="活动通知"></el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="handleDateFilter"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
            </el-row>

            <!-- 消息列表 -->
            <el-table
              :data="filteredMessages"
              style="width: 100%; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);"
              @row-click="handleRowClick"
              :row-style="{ cursor: 'pointer' }"
              :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold' }"
              :cell-style="{ padding: '12px 8px' }"
            >
              <el-table-column prop="type" label="消息类型" width="150"></el-table-column>
              <el-table-column prop="content" label="消息内容" width="300"></el-table-column>
              <el-table-column prop="sendTime" label="发送时间" width="180"></el-table-column>
              <el-table-column prop="status" label="状态" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.status === '未读'" style="color: red;">{{ scope.row.status }}</span>
                  <span v-else>{{ scope.row.status }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleMarkAsRead(scope.row)">标记已读</el-button>
                  <el-button type="text" @click="handleMarkAsUnread(scope.row)">标记未读</el-button>
                  <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalMessages"
              style="margin-top: 20px;"
            ></el-pagination>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

    <!-- 消息详情弹窗 -->
    <el-dialog title="消息详情" :visible.sync="dialogVisible" width="50%">
      <div v-if="selectedMessage">
        <p><strong>消息类型:</strong> {{ selectedMessage.type }}</p>
        <p><strong>消息内容:</strong> {{ selectedMessage.content }}</p>
        <p><strong>发送时间:</strong> {{ selectedMessage.sendTime }}</p>
        <p><strong>状态:</strong> {{ selectedMessage.status }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AsideLayout from '../../layout/AsideLayout.vue';

export default {
  components: { AsideLayout },
  data() {
    return {
      searchQuery: '', // 搜索框内容
      selectedType: '', // 选择的消息类型
      dateRange: [], // 日期范围
      messages: [
        { type: '系统通知', content: '您的订单已发货', sendTime: '2023-10-01 10:30', status: '未读' },
        { type: '订单通知', content: '您的订单已支付', sendTime: '2023-09-15 14:20', status: '已读' },
        { type: '活动通知', content: '新活动上线，快来参与', sendTime: '2023-08-20 09:10', status: '未读' },
        { type: '系统通知', content: '您的账户已更新', sendTime: '2023-07-10 16:45', status: '已读' },
        { type: '订单通知', content: '您的订单已取消', sendTime: '2023-06-01 11:00', status: '已读' }
      ],
      currentPage: 1,
      pageSize: 10,
      totalMessages: 5,
      dialogVisible: false,
      selectedMessage: null
    };
  },
  computed: {
    // 根据搜索和筛选过滤消息
    filteredMessages() {
      let messages = this.messages;

      // 搜索过滤
      if (this.searchQuery) {
        messages = messages.filter(message => message.content.includes(this.searchQuery));
      }

      // 类型过滤
      if (this.selectedType) {
        messages = messages.filter(message => message.type === this.selectedType);
      }

      // 日期过滤
      if (this.dateRange && this.dateRange.length === 2) {
        const startDate = new Date(this.dateRange[0]).getTime();
        const endDate = new Date(this.dateRange[1]).getTime();
        messages = messages.filter(message => {
          const messageTime = new Date(message.sendTime).getTime();
          return messageTime >= startDate && messageTime <= endDate;
        });
      }

      return messages;
    },
    // 未读消息数量
    unreadCount() {
      return this.messages.filter(message => message.status === '未读').length;
    },
    // 已读消息数量
    readCount() {
      return this.messages.filter(message => message.status === '已读').length;
    }
  },
  methods: {
    fetchMessages() {
      // 模拟获取消息数据
      this.totalMessages = this.messages.length;
    },
    handleSearch() {
      console.log('搜索消息：', this.searchQuery);
      this.fetchMessages();
    },
    handleMarkAsRead(row) {
      row.status = '已读';
      this.$message.success('消息已标记为已读');
    },
    handleMarkAsUnread(row) {
      row.status = '未读';
      this.$message.success('消息已标记为未读');
    },
    handleDelete(row) {
      this.messages = this.messages.filter(message => message !== row);
      this.totalMessages = this.messages.length;
      this.$message.success('消息已删除');
    },
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    handleRowClick(row) {
      this.selectedMessage = row;
      this.dialogVisible = true;
    },
    handleDateFilter() {
      this.fetchMessages();
    }
  },
  mounted() {
    this.fetchMessages();
  }
};
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  font-weight: bold;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-right a {
  margin-right: 20px;
  color: #333;
  text-decoration: none;
}

.message-card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.el-table {
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-table__header th {
  background-color: #f5f7fa;
  color: #333;
  font-weight: bold;
}

.el-table__body tr:hover {
  background-color: #f0f9eb;
}

.el-pagination {
  margin-top: 20px;
}

.stat-item {
  text-align: center;
  font-size: 16px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}
</style>